<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-01 11:24:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-16 08:36:55
-->

<template>
  <div>
    <div id="bg">
      <!-- <vue-particles
                color="#39AFFD"
                :particleOpacity="0.7"
                :particlesNumber="100"
                shapeType="circle"
                :particleSize="4"
                linesColor="#8DD1FE"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push" 
                class="bg">
              </vue-particles> -->
    </div>

    <!-- 头部 -->
    <!-- <Head></Head> -->
    <!-- /头部 -->

    <!-- 内容区域 -->
    <div class="container">
      <!-- 作者信息 -->
      <div class="author">
        <div class="information">
          <!-- 作者简介 -->
          <div class="item1">
            <!-- 头像等信息 -->
            <div class="head_img">
              <!-- <img src="" alt=""> -->
            </div>
            <p class="author_name">
              <span>{{
                article.baseUser ? article.baseUser.realname : ""
              }}</span>
              <img src="/images/vipNew.png" alt="" />
              <img src="/images/expertNew.png" alt="" />
            </p>
            <p class="author_age">
              <span>码龄6年</span>
              <img src="/images/20210412060958.png" alt="" />
              <span>前端领域优秀创作者</span>
            </p>
            <section class="c"></section>
          </div>
          <div class="item2">
            <!-- 排名等级信息 -->
            <ul>
              <li>1117<br />原创</li>
              <li>41<br />周排名</li>
              <li>339<br />总排名</li>
              <li>224万+<br />访问</li>
              <li><img src="/images/blog8.png" alt="" /><br />等级</li>
            </ul>
          </div>
          <div class="item3">
            <!-- 粉丝获赞等信息 -->
            <ul>
              <li>3万+<br />积分</li>
              <li>5万+<br />粉丝</li>
              <li>4519<br />获赞</li>
              <li>2328<br />评论</li>
              <li>1万+<br />收藏</li>
            </ul>
          </div>
          <div class="item4">
            <!-- 勋章展示 -->
            <ul>
              <li><img src="/images/github@240.png" alt="" /></li>
              <li><img src="/images/blinknewcomer@240.png" alt="" /></li>
              <li><img src="/images/qiandao150@240.png" alt="" /></li>
              <li><img src="/images/yuedu30@240.png" alt="" /></li>
              <li><img src="/images/chizhiyiheng@240.png" alt="" /></li>
              <li><img src="/images/chizhiyiheng@240.png" alt="" /></li>
              <li><img src="/images/qixiebiaobing4@240.png" alt="" /></li>
              <li><img src="/images/yuanli_tansuo@240.png" alt="" /></li>
              <li><img src="/images/yuanli_tupo@240.png" alt="" /></li>
              <li><img src="/images/yuanli_xuexili@240.png" alt="" /></li>
              <li><img src="/images/yuanli_xinren@240.png" alt="" /></li>
              <li><img src="/images/fengxiangxiaobing@240.png" alt="" /></li>
              <li><img src="/images/github@240.png" alt="" /></li>
              <li><img src="/images/github@240.png" alt="" /></li>
              <li><img src="/images/github@240.png" alt="" /></li>
              <li><img src="/images/github@240.png" alt="" /></li>
              <li><img src="/images/github@240.png" alt="" /></li>
              <li><img src="/images/github@240.png" alt="" /></li>
            </ul>
          </div>
          <div class="item5">
            <!-- 私信或者关注 -->
            <div>私信</div>
            <div>关注</div>
          </div>
        </div>
        <div class="found">
          <!-- 搜索博主文章 -->
          <input type="text" placeholder="搜索博主文章" />
          <div>
            <img src="/images/csdn-sou.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 封面 -->
      <div class="cover">
        <img :src="article.cover" alt="" />
      </div>
      <!-- 联系我们 -->
      <div class="lianxi">
        <p>微信</p>
        <div>
          <img src="/images/code.webp" alt="" />
          <p>欢迎一起讨论学习</p>
        </div>
        <p></p>
        <section>爱分享的我们每天都会快乐!</section>
      </div>
      <section class="c"></section>
      <!-- 文章内容 -->
      <div class="content">
        <div class="title">{{ article.title }}</div>
        <p>{{ article.category ? article.category.name+'文章' : "" }}</p>
        <div v-html="article.content" class="con"></div>
        <p>每篇文章都可以学到很多东西,感谢每位楼主的分享!</p>
      </div>
    </div>

    <!-- 尾部 -->
    <Footer></Footer>
    <!-- /尾部 -->
  </div>
</template>
<script>
import { get } from "../utils/request";
// import Head from './components/Head'
import Footer from "./components/Footer";
export default {
  // components: {Head}
  components: { Footer },
  data() {
    return {
      id: "",
      article: {},
    };
  },
  methods: {
    loadArticle() {
      let url = "/index/article/findById";
      get(url, { id: this.id }).then((resp) => {
        this.article = resp.data;
      });
    },
  },
  created() {
    // 获取文章id
    this.id = this.$route.query.id;
    if (this.id) {
      // 加载文章数据
      this.loadArticle();
    }
  },
};
</script>
<style scoped>
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  transition: all 1.5s;
  /* display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; */
}
/* #bg {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: #eff4fa;
} */
/* 作者信息样式 */
.author {
  width: 25%;
  float: left;
  background: #fff;
  /* background: rgba(0,0,0,0.75); */
}
.author:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 3px 3px skyblue;
}
.author .information {
  width: 100%;
  height: 430px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.author .information > div {
  padding: 16px 16px 6px;
}
/* .author .information .item1 {
    border-bottom: 1px solid #ccc;
} */
.author .information .item1 .head_img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eff4fa;
  float: left;
}
.information .item1 .author_name {
  height: 20px;
  font-size: 14px;
  color: #bb9444;
  float: left;
  padding-left: 10px;
  display: flex;
  align-items: center;
  margin-top: -5px;
}
.information .item1 .author_name img {
  width: 46px;
  height: 20px;
  margin: 0 5px;
}
.information .item1 .author_age {
  height: 20px;
  font-size: 13px;
  color: #bb9444;
  float: left;
  display: flex;
  align-items: center;
  margin-top: -5px;
  padding-left: 5px;
}
.information .item1 .author_age img {
  width: 14px;
  margin: 0 2px;
}
/* 清除浮动 */
.c {
  clear: both;
}
.information .item2 ul {
  /* width: 300px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.information .item2 ul li {
  /* width: 45px; */
  font-size: 14px;
  text-align: center;
}
.information .item2 ul li img {
  width: 22px;
}
.information .item3 ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}
.information .item3 ul li {
  font-size: 14px;
  text-align: center;
  color: #999aaa;
}
.information .item4 ul {
  display: flex;
  flex-wrap: wrap;
}
.information .item4 ul li img {
  width: 36px;
  cursor: pointer;
}
.information .item5 {
  display: flex;
  justify-content: space-between;
}
.information .item5 > div {
  width: 126px;
  height: 28px;
  text-align: center;
  background: #fff;
  outline: none;
  color: #555666;
  border: 1px solid #ccc;
  line-height: 28px;
  border-radius: 5px;
  cursor: pointer;
}
/* found 搜索框*/
.found {
  width: 100%;
  height: 48px;
  /* padding: 16px 16px 6px; */
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
  line-height: 48px;
  text-align: center;
  position: relative;
}
.found input {
  outline: none;
  width: 234px;
  height: 32px;
  /* background: #555666; */
  border: 1px solid #555666;
  /* background: #ccc; */
  padding-left: 16px;
  border-radius: 5px;
}
.found div {
  position: absolute;
  right: 48px;
  bottom: 7px;
  width: 32px;
  height: 32px;
  background: #eff4fa;
}
.found div img {
  width: 100%;
}
/* 主图 */
.cover {
  margin-top: 5px;
  width: 45%;
  height: 485px;
  float: left;
  margin-left: 20px;
  /* border-radius: 10px; */
  box-shadow: 0 0 5px 3px rgb(61, 58, 58);
}
.cover:hover {
  transform: scale(1.1);
}
.cover img {
  width: 100%;
  height: 100%;
}
/* 联系我们 */
.lianxi {
  margin-top: 5px;
  width: 25%;
  height: 485px;
  float: right;
  background: #fff;
  border-radius: 5px;
  margin-left: 20px;
}
.lianxi:hover {
  transform: scale(1.1);
}
.lianxi > p {
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.75);
  text-indent: 2em;
  font-size: 14px;
  height: 2em;
  line-height: 2em;
  font-weight: bold;
}
.lianxi > div {
  width: 200px;
  height: 200px;
  margin: 50px auto;
}
.lianxi > div > img {
  width: 100%;
  height: 100%;
}
.lianxi > div > p {
  text-align: center;
}
.lianxi > section {
  margin-top: 40px;
  color: #999;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
/* 内容区域 */
.content {
  /* width: 90%; */
  /* height: 3500px; */
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 50px;
  /* float: left; */
  margin: 20px auto;
}
.content > .title {
  font-size: 24px;
  font-weight: bolder;
  text-align: center;
  line-height: 1.6em;
  padding: 1em 0;
}
.content>p {
    font-weight: bold;
    background: #eff4fa;
    padding: 1em 0;
    margin: 1em 0;
    text-indent: 2em;
}
::v-deep .con img {
  width: 65% !important;
  display: block !important;
  margin: 0 auto !important;
}
</style>